<template>
  <div class="">
    <el-card class="box-card">
      <div class="text item">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户">
            <el-input v-model="formInline.user" placeholder="用户"></el-input>
          </el-form-item>
          <el-form-item label="时间日期">
            <el-select v-model="formInline.region" placeholder="时间日期">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门禁">
            <el-select v-model="formInline.region" placeholder="门禁">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="warning" icon="el-icon-share" @click="onSubmit">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <div class="text item">
        <el-table :data="tableData" style="width: 100%" height="600px">
          <el-table-column prop="createTime" label="日期">
          </el-table-column>
          <el-table-column prop="userId" label="姓名">
          </el-table-column>
          <el-table-column prop="context" label="动作">
          </el-table-column>
          <el-table-column prop="accessName" label="门禁">
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { accessLoglist, addAccessLog, editAccessLog, delAccessLog } from "@/api/accesslog/index";
import { listUser } from "@/api/system/user";
import { re } from "mathjs";
export default {
  name: '',
  props: {},
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  components: {

  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询门禁列表 */
    getList() {
      this.loading = true
      accessLoglist(this.queryParams).then(res => {
        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      }
      );
    },
    // 查询空间用户
    getListUser() {
      listUser(this.queryParamsUser).then(response => {
        this.userListNew = response.rows;
        this.queryParamsUser.total = response.total
      }
      );
    },
    // 查询
    onSubmit() {
      console.log('submit!');
    }
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
</style>
